<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementUI.css">

    <script src="../js/vue.js"></script>
    <script src="../js/elementUI.js"></script>
    <script src="../js/axios.js"></script>
</head>


<body>
<div id="app">
    <el-input placeholder="名称" v-model="query.title" style="width: 200px;" class="filter-item"></el-input>
    <el-button type="primary" @click="toAdd">添加</el-button>
    <el-button type="danger" @click="DeleteAll">多选删除</el-button>
    <template>
        <!--<el-table :data="dataTable" tooltip-effect="dark" border style="width: 100%">-->
        <el-table
                ref="multipleTable"
                :data="dataTable"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column fixed prop="id" label="编号" width="150"></el-table-column>
            <el-table-column prop="title" label="相册名称" width="120"></el-table-column>
            <el-table-column prop="specNum" label="相册主图" width="200">
                <template slot-scope="scope">
                    <img :src="scope.row.image" alt="" style="height: 50px;width: 50px ">
                </template>
            </el-table-column>

            <el-table-column prop="specNum" label="图片数量" width="200">
                <template slot-scope="scope">
                    {{JSON.parse(scope.row.imageItems).length}}
                </template>
            </el-table-column>

            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="goList(scope.row)">查看</el-button>
                    <el-button size="mini" type="primary" @click="toEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="DeleteOne(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--@size-change 点击事件改变每页展示几条 和:page-sizes中的固定数值相对应，
        通过:page-size来提交展示数据的条数-->
        <!--@current-change和:current-page相对应 当前页数点击改变后跟随当前点击的页码数跳转，
        通过:total分出的页码数来提交跳转的页码数-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pageNum"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </template>

    <el-dialog :title="mode.title" :visible.sync="dialogAddVisible">
        <el-form :model="formData">
            <el-form-item label="相册名称">
                <el-col :span="8">
                    <el-input v-model="formData.title"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="相册主图">
                <el-upload
                        action="/upload/uploadLocal.do"
                        list-type="picture-card"
                        :limit="1"
                        :file-list="uploadFileList"
                        :on-success="uploadSuccess"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" append-to-body>
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            uploadFileList: [],//添加时图片缓存清理模型和修改的回显图数据
            autoUpload: true,//自动上传
            dialogImageUrl:"",
            dialogVisible:false,
            multipleSelection: [],
            dialogAddVisible: false,
            dataTable: [],//显示所有数据
            mode: {
                title: "",
                url: ""
            },
            formData: {
                title: "",
                image:""
            },//添加修改的对象
            total: 0,
            query: {
                //默认显示到第一页
                pageNum: 1,
                pageSize: 2,
                //默认每页显示6条数据（这里的页码6要和分页组件里数组的页码数相对应[6,8,10,15]，
                // 否则分页的页码数会随着数组中第一个值进行分页，不会按照这里的默认值进行分页，
                // 后面的页码会多出分页界面而出现空白页）
                title: "",
            }
        },
        watch: {
            query: {
                deep: true,
                handler() {
                    this.initData();
                }
            }
        },
        methods: {
            goList(row){
                location.href="albumList.html?id="+row.id;
            },
            // closeDialog(done){
            //     this.initForData();
            //     done();
            // },
            //图片页面的删除标志功能
            handleRemove(file,fileList){
                this.formData.image="";
            },
            //查看上传的图片显示功能
            handlePictureCardPreview(file){
                this.dialogImageUrl=file.url;
                this.dialogVisible=true;
            },
            //res为服务端返回的值，也就是图片的添加即显
            uploadSuccess(res){
                this.formData.image=res;
                // this.$refs["myformData"].validateField("img");
            },
            //查看规格列表***将ID和name传入spec页面进行名称的显示
            goSpec(templateId,name){
                location.href="spec.html?templateId="+templateId+"&name="+escape(name);
            },
            //查看参数列表***将ID和name传入para页面进行名称的显示
            goPara(templateId,name){
                location.href="para.html?templateId="+templateId+"&name="+escape(name);
            },
            //全选的数据
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //展示所有(分页，模糊查询)
            initData() {
                axios.post(`/album/findPage.do?page=${this.query.pageNum}&size=${this.query.pageSize}`, this.query).then(res => {
                    this.dataTable = res.data.rows;
                    this.total = res.data.total;
                    if (this.dataTable.length == 0 && this.query.pageNum > 1) {
                        this.query.pageNum--
                    }
                })
            },
            //表单置空
            initForData() {
                this.formData = {
                    title: "",
                    image:""
                };
                this.uploadFileList=[];
                this.dialogAddVisible = false;
            },
            //添加弹窗
            toAdd() {
                this.initForData();
                this.mode = {
                    title: "添加相册",
                    url: "/album/add.do"
                }
                this.dialogAddVisible = true;
            },
            //添加信息
            add() {
                axios.post(this.mode.url, this.formData).then(res => {
                    if (res.data.code == 0) {
                        this.$message({
                            type: 'success',
                            message: res.data.message
                        });
                        this.initData();
                        this.initForData();
                    } else {
                        this.$message({
                            type: 'error',
                            message: '添加失败!'
                        });
                    }
                })
            },
            toEdit(row) {
                this.formData = JSON.parse(JSON.stringify(row));
                this.mode = {
                    title: "修改相册",
                    url: "/album/update.do"
                }
                this.uploadFileList=[{name:"",url:row.image}]
                this.dialogAddVisible = true;
            },
            //点击事件改变到每页展示几条信息
            handleSizeChange(pageSize) {
                this.query.pageSize = pageSize;
                // this.initData();
            },
            //点击事件跳转到需要的页码数
            handleCurrentChange(pageNum) {
                this.query.pageNum = pageNum;
                // this.initData();
            },
            //    单选删除
            DeleteOne(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.DeleteReal(id);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //多选删除
            DeleteAll() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                  if (this.multipleSelection.length>0){
                      this.DeleteReal(this.multipleSelection.map(e => e.id).join(","));
                      this.$message({
                          type: 'success',
                          message: '删除成功!'
                      });
                  } else {
                      this.$message({
                          type: 'error',
                          message: '至少选择一个!'
                      });
                  }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //删除的执行请求
            DeleteReal(ids) {
                axios.post("/album/deleteAll.do?ids=" + ids).then(res => {
                    this.initData();
                })
            },
        },

        //创建后直接加载
        created() {
            this.initData()
        }
    })
</script>
</body>
</html>